<template>
  <div>
      <router-link list to="">
          <div item>
            <img src="/static/img/person.jpg" alt="">
            <div text>
              <p>人的名称xxxxx</p>
              <em>被空虚击溃的天空：我觉得新专的质...我觉得新专的质...我觉得新专的质...</em>
            </div>
          </div>
          <span>22:52</span>
      </router-link>
        <router-link list to="">
          <div item>
            <img src="/static/img/person.jpg" alt="">
            <div text>
              <p>人的名称xxxxx</p>
              <em>被空虚击溃的天空：我觉得新专的质...我觉得新专的质...我觉得新专的质...</em>
            </div>
          </div>
          <span>22:52</span>
      </router-link>
      <router-link list to="">
          <div item>
            <img src="/static/img/person.jpg" alt="">
            <div text>
              <p>人的名称xxxxx</p>
              <em>被空虚击溃的天空：我觉得新专的质...我觉得新专的质...我觉得新专的质...</em>
            </div>
          </div>
          <span>22:52</span>
      </router-link>
  </div>
</template>

<style lang="less" scoped>
[list]{
  background: #fff;
  border-bottom: 1px solid #eee;
    padding: 10px;
    display: flex;
    justify-content: space-between;
  [item]{
    display: flex;
    img{
      border-radius: 50%;
      margin-right: 18px;
      width: 48px;
      height: 48px;
    }
  }
  [text]{
    p{
    padding-top: 4px;
    color: rgba(0, 0, 0, 1);
    font-size: 14px;
    text-align: left;
    }

  }
  span{
    padding-top: 2px;
    color: #999999;
    font-size: 13px;
  }
  em{
    display: block;
    width: 60vw;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-style: normal;
    color: rgba(128, 128, 128, 1);
    font-size: 12px;
    text-align: left;

  }
}
</style>

